<template>
  <a-layout-content>
    <a-layout-header
        :style="{ background: '#03a9f3', padding: 0,height:'50px',lineHeight:'50px','border-bottom':'1px solid rgba(5, 5, 5, 0.06)'}">
      <div class="flex justify-content-between" style="padding:0 10px;color:#fff;">
        <div class="logo">
          <div class="flex justify-center gui-padding-s pr ftp2">
<!--            <img src="/imgs/logo.png" style="width:120px;">-->
            <span class="mr20 ml10 fb fz20 pr ftp5">船员云</span>
            <button @click="handleExpand" v-if="!collapsed">
              <MenuFoldOutlined style="font-size:18px"/>
            </button>
            <button @click="handleExpand" v-else>
              <MenuUnfoldOutlined style="font-size:18px"/>
            </button>
            <a-dropdown class="pr ftp2">
              <a class="ant-dropdown-link ml10" >
                <span>当前公司是：{{currentSystem?.name}}</span>
                <DownOutlined />
              </a>
              <template #overlay>
                <a-menu>
                  <a-menu-item v-for="(system,index) in userStore.systemList" :key="system.id"  @click.prevent="handleChangeSystem(system)">
                    <a href="javascript:;"><span v-if="system.active">当前公司是：</span>{{system.name}}</a>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
        </div>
        <cc-layout-header></cc-layout-header>
      </div>
    </a-layout-header>
    <a-layout has-sider>
      <a-layout-sider
          v-model:collapsed="collapsed"
          theme="light"
          :style="{height: '100vh','borderRight':'1px solid rgba(5, 5, 5, 0.08)',position: 'fixed', left: 0, top: '50px', bottom: 0 }"
      >
        <!--菜单区域-->
        <a-menu
            v-model:selectedKeys="selectedKeys"
            v-model:openKeys="openKeys"
            theme="light"
            mode="inline"
            :style="{ height: 'calc(100vh - 50px)', overflow: 'auto', }"
        >
          <template v-for="(menu,index) in menuList" :key="menu.path">
            <a-menu-item :key="menu.path" v-if="menu.children && menu.children.length == 0">
              <nuxt-link :to="menu.path">
                <component :is="menu.icon"></component>
                <span>{{menu.title}}</span>
              </nuxt-link>
            </a-menu-item>
            <a-sub-menu :key="menu.path" v-else>
              <template #title>
                <span>
                  <component :is="menu.icon"></component>
                  <span>{{menu.title}}</span>
                </span>
              </template>
              <template v-if="menu.children && menu.children.length > 0">
                <template  v-for="(cmenu,cindex) in menu.children" :key="cindex">
                  <nuxt-link :to="cmenu.path">
                    <a-menu-item :key="cmenu.path">
<!--                      <component :is="cmenu.icon"></component>-->
                      <span>{{cmenu.title}}</span>
                    </a-menu-item>
                  </nuxt-link>
                </template>
              </template>
            </a-sub-menu>
          </template>
        </a-menu>
      </a-layout-sider>
      <a-layout :style="{ marginLeft: collapsed?'80px':'200px' }">
        <!--头部区域-->
        <!--内容区域-->
        <a-layout-content :style="{  overflow: 'initial'}">
          <div :style="{ height:'calc(100vh - 50px)' , background: '#fff'}">
            <nuxt-page></nuxt-page>
          </div>
        </a-layout-content>
        <!--底部区域-->
        <a-layout-footer :style="{ textAlign: 'center' }" v-if="false">
          <cc-layout-footer></cc-layout-footer>
        </a-layout-footer>
      </a-layout>
    </a-layout>
  </a-layout-content>
</template>
<script setup>
const route = useRoute()
const openKeys = ref([route.fullPath])
const userStore = useStore.userState()
const currentSystem = ref(userStore.systemList.find(c=>c.active))
const selectedKeys = computed(()=>{
  return [route.fullPath || userStore.indexPath ]
})
const menuList = computed(()=>userStore.menus)
const collapsed = ref(false);
const handleExpand = () => {
  collapsed.value = !collapsed.value
}
// 改变公司
const handleChangeSystem = async (system)=>{
  try {
    if(userStore.systemList.find(c=>c.active).id == system.id)return;
    userStore.systemList.filter(c=>c.active).map(c=>{ c.active=false})
    userStore.systemList.find(c=>c.id==system.id).active = true;
    currentSystem.value = system;
    const resp = await useChangeSystemApi(system)
    userStore.changeSystem(system,resp.data)
    window.location.reload()
    useMessage().success("切换成功!")
  }catch (e){
     useMessage().error("更换公司失败!")
  }
}


const handleOpenKeys = ()=> {
  var arr = []
  var currentPath = route.fullPath;

  menuList.value.forEach(menu => {
    if (menu.children && menu.children.length > 0) {
      menu.children.forEach(cmenu => {
        if (cmenu.path == currentPath) {
          arr.push(menu.path)
          return
        }
      })
    }
  })
  arr.push(currentPath)
  openKeys.value = arr
}


definePageMeta({
  middleware: "md-auth"
})

onMounted(() => {
  handleOpenKeys()
})

</script>
<style scoped>
.logo {
  border-bottom: 1px solid rgba(5, 5, 5, 0.06);
  border-right: 1px solid rgba(5, 5, 5, 0.06);
}
</style>
